<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
<script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/js/pintuer.js"></script>
</head>
<body>
<form method="post" action="" id="listform">
  <div class="panel admin-panel" id="menu">
    <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
      <template v-for="(item, index) in menus">
      <template v-if="add == item.menuName" >
        <li> <a :href="baseUrl + item.menuUrl + '&pageNum=1 &tgId=' + item.menuPid" class="button border-main icon-plus-square-o">{{item.menuName}}</a> </li>
       </template>
       </template>
        <li>
          <input type="text" placeholder="请输入搜索关键字" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
          <a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a></li>
      </ul>
    </div>
    <table class="table table-hover text-center">
      <tr>
       
 
        <th>角色编号</th>
    	<th>角色名称</th>
    	<th>角色描述</th>
        <th width="310">操作</th>
      </tr>
      <volist name="list" id="vo">
      	<c:forEach items="${roleList}" var="role">
        <tr>
          
          <td>${role.roleId }</td>
          <td width="10%">${role.roleName }</td>
          
          <td><font color="#00CC99">${role.roleDescribe}</font></td>
        
          <td>
          <template v-for="(item, index) in menus">
          <div class="button-group">
          <template v-if="edit == item.menuName" >
          <a :href="baseUrl + item.menuUrl + '&roleid=${role.roleId }&tgId=' + item.menuPid" class="button border-main"><span class="icon-edit"></span>{{item.menuName}}</a>
          <!-- <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> --> 
          </template>
          <template v-if="del == item.menuName" >
          <a class="button border-red" href="javascript:;" onclick="return del('${pageContext.request.contextPath}/sys/role.do?method=deleteRole','${role.roleId }','${tgId}')"><span class="icon-trash-o"></span> {{item.menuName}}</a>
          
          <!-- <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 删除</a>  -->
          </template>
          </div>
          </template>
          </td>
        </tr>
   		</c:forEach>
     
      <tr>
        <td colspan="8">
       
         <div class="pagelist">
       
			
         </div>
        </td>
      </tr>
    </table>
  </div>
</form>
<script src="${pageContext.request.contextPath}/static/js/vue.min.js"></script>

	<!-- vue 遍历菜单 -->
	<script type="text/javascript">
   
   
    	var _vm = new Vue({
    		el : "#menu",
    		data : {
    			baseUrl : '${pageContext.request.contextPath}',
    			menus : ${resultMenus},
    			add:"添加角色",
    			del:"删除角色",
    			edit:"修改角色"
    			
    		}
    	});
    	//单个删除
    	function del(uri,id,tgId){
    		
    		if(confirm("您确定要删除吗?")){
    			$.ajax({
    				type:'POST',
    				url: uri, 
    				dataType:'json',
    				data:{
    					id : id,
    					tgId:tgId
    				},
    				async: false,
    				success:function(msg){
    					var flag= "true";
    	                //根据后台返回前台的msg给提示信息加HTML
    	                if(flag =msg){
    	                	window.location.reload();
    	                	alert("删除成功");
    	                	}
    	                else{
    	                	window.location.reload();
    	                	alert("删除失败已经绑定了用户");
    	                }
    				},
    				error:function(data , c){
    					alert("服务器异常");
    				}
    			});	
    		}

    	}
    </script>
    
    
</body>
</html>